<template>
  <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
    <!-- 忘记密码卡片容器 -->
    <div class="w-full max-w-md p-8 space-y-8 bg-white rounded-xl shadow-2xl transform transition-all duration-300 hover:shadow-2xl">
      <!-- Logo和标题区域 -->
      <div class="text-center">
        <div class="flex justify-center mb-4">
          <img 
            src="/images/logo.png" 
            alt="PyScreenBrain Logo" 
            class="h-20 w-20 object-contain"
          />
        </div>
        <h2 class="text-2xl font-bold text-gray-900 mb-2">忘记密码？</h2>
        <p class="text-sm text-gray-600">输入您的邮箱地址，我们将发送重置密码的链接</p>
      </div>

      <!-- 错误提示 -->
      <div v-if="error" class="p-3 bg-red-50 border border-red-200 rounded-lg">
        <div class="flex items-center">
          <svg class="w-5 h-5 text-red-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
          </svg>
          <span class="text-sm text-red-700">{{ error }}</span>
        </div>
      </div>

      <!-- 成功提示 -->
      <div v-if="success" class="p-3 bg-green-50 border border-green-200 rounded-lg">
        <div class="flex items-center">
          <svg class="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
          </svg>
          <span class="text-sm text-green-700">{{ success }}</span>
        </div>
      </div>

      <!-- 忘记密码表单 -->
      <form @submit.prevent="handleForgotPassword" class="space-y-6" v-if="!emailSent">
        <!-- 邮箱输入框 -->
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 mb-2">邮箱地址</label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
                <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
              </svg>
            </div>
            <input
              id="email"
              v-model="form.email"
              type="email"
              required
              class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
              placeholder="请输入您的邮箱地址"
              @input="validateEmail"
            />
            <div v-if="emailError" class="absolute inset-y-0 right-0 pr-3 flex items-center">
              <svg class="h-5 w-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
              </svg>
            </div>
          </div>
          <p v-if="emailError" class="mt-1 text-sm text-red-600">{{ emailError }}</p>
        </div>

        <!-- 发送重置链接按钮 -->
        <div>
          <button
            type="submit"
            :disabled="isLoading || hasErrors"
            class="group relative w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 transform hover:scale-[1.02] active:scale-[0.98]"
          >
            <!-- 加载动画 -->
            <svg v-if="isLoading" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            {{ isLoading ? '发送中...' : '发送重置链接' }}
          </button>
        </div>
      </form>

      <!-- 重置密码成功后的提示 -->
      <div v-if="emailSent" class="text-center space-y-4">
        <div class="flex justify-center">
          <svg class="h-16 w-16 text-green-500" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
          </svg>
        </div>
        <h3 class="text-lg font-medium text-gray-900">重置链接已发送</h3>
        <p class="text-sm text-gray-600">
          我们已向 <span class="font-medium text-blue-600">{{ form.email }}</span> 发送了密码重置链接
        </p>
        <p class="text-xs text-gray-500">
          请检查您的邮箱（包括垃圾邮件文件夹），点击链接重置密码
        </p>
        <div class="pt-4">
          <button
            @click="goToLogin"
            class="w-full py-2 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-blue-600 bg-blue-50 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
          >
            返回登录页面
          </button>
        </div>
      </div>

      <!-- 登录引导 -->
      <div class="text-center" v-if="!emailSent">
        <p class="text-sm text-gray-600">
          想起密码了？
          <a href="/auth/login" class="font-medium text-blue-600 hover:text-blue-500 transition-colors duration-200">立即登录</a>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { forgotPassword } from '@/services/auth'

// 路由
const router = useRouter()

/**
 * 忘记密码表单数据
 */
const form = reactive({
  email: ''
})

/**
 * 响应式数据
 */
const isLoading = ref(false)
const error = ref('')
const success = ref('')
const emailError = ref('')
const emailSent = ref(false)

/**
 * 计算属性：检查是否有验证错误
 */
const hasErrors = computed(() => {
  return !!emailError.value
})

/**
 * 验证邮箱格式
 */
const validateEmail = () => {
  const value = form.email.trim()
  
  if (!value) {
    emailError.value = '请输入邮箱地址'
    return
  }
  
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!emailRegex.test(value)) {
    emailError.value = '邮箱格式不正确'
    return
  }
  
  emailError.value = ''
}

/**
 * 处理忘记密码操作
 */
const handleForgotPassword = async () => {
  // 清除之前的消息
  error.value = ''
  success.value = ''
  
  // 验证邮箱
  validateEmail()
  
  // 如果有验证错误，不提交
  if (hasErrors.value) {
    error.value = '请修复表单中的错误'
    return
  }
  
  isLoading.value = true
  
  try {
    await forgotPassword({
      email: form.email.trim()
    })
    
    success.value = '重置链接已发送成功！'
    emailSent.value = true
    
  } catch (err: any) {
    console.error('发送重置链接失败:', err)
    error.value = err.response?.data?.message || '发送重置链接失败，请稍后重试'
  } finally {
    isLoading.value = false
  }
}

/**
 * 返回登录页面
 */
const goToLogin = () => {
  router.push('/auth/login')
}
</script>

<style scoped>
/* 可以在这里添加组件特定的样式 */
</style>